<template>
    <view class="content">
        <view class="main">
            <!-- <van-nav-bar :title="scrolling ? navBarTitle : ''" left-arrow @click-left="onClickLeft"  id="navBar" > </van-nav-bar> -->
            <scroll-view scroll-y="true" @scroll="handleScroll" style="height: 100vh;" :scroll-top="scrollTop"
                ref="myScrollView" show-scrollbar="false">
                <view class="content-top fixed_top" :style="bgOpacity" id="content_top"
                    :class="{ fixed_top: scrolling }">
                    <van-nav-bar :title="navBarTitle" left-arrow @click-left="onClickLeft" id="navBar"> </van-nav-bar>
                    <!-- <view class="tabBox" :class="{ top_display: !scrolling }" id="tabBox" :style="scrollMT">
                        <view class="tabs white">
                            <view class="tabbar-item tab-item" v-for="(ite, index) in tabBarList"
                                @click="changeTab(index, $event, ite.typeName)"
                                :class="{ active: index === currentIndex, option: currentIndex === 0, }" :key="index">
                                {{ ite.typeName }}
                            </view>
                        </view>
                    </view> -->
                </view>
                <view class="main-container" ref="container">
                    <view class="sur_box_bg">
                        <!-- <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/homeAppliances_bg.png"
                            alt=""> -->
                        <view class="sur_box"></view>
                    </view>
                    <view class="card_bg">
                        <view class="pageTitle" @tap="showNodePopup">{{title}} <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/blackTriangleIcon.png" alt=""></view>
                        <view class="serviceStatusTime">{{serviceStatusTime}}{{serviceStatus=='canceled'? '用户取消了服务':'已开始服务'}}</view>
                        <view class="service-desc-card" v-if="serviceStatus !=='canceled'">
                            <view class="judgeTips">
                                <view>
                                    <textarea placeholder="请输入服务描述（必填）" :value="message"
                                        placeholder-style="font-size:24rpx;color: #999999;"
                                        :disable-default-padding="true" @input="handleInput" auto-focus="true"
                                        confirm-type="done" maxlength="200" autoHeight
                                        custom-style="font-size: 12px;line-height:1.5; color:#111111;"></textarea>
                                </view>
                            </view>
                            <view class="uploadPic">
                                <!-- <van-uploader :file-list="fileList" :deletable="true" max-count="4"
                                @after-read="afterRead" @delete="deletedFile" @before-read="beforeRead"
                                accept="media" preview-image multiple :show-upload="true"
                                :capture="['album', 'camera']" upload-text="点击上传图片（最多四张）" :max-duration="60">
                            </van-uploader> -->
                                <view class="preview-list">
                                    <view v-for="(file, fIndex) in fileList" :key="fIndex"
                                        class="preview-item">
                                        <image :src="file.url" class="preview-image"
                                            @click="previewImage(file.localPath || file.url)">
                                        </image>
                                        <view class="delete-icon" @click="deleteImage(fIndex)">×</view>
                                    </view>
                                </view>
                                <!-- 上传按钮 -->
                                <view class="upload-btn" @click="chooseImage">
                                    <van-icon name="plus" size="40" color="#BEBEBE" />
                                    <!-- <image class="upload-icon"
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/uploaderPic.png"
                                        mode="aspectFit"></image> -->
                                    <text class="upload-text">点击上传图片\n（最多九张）</text>
                                </view>
                            </view>
                        </view>
                        <view class="card">
                            <view class="activityAddress">
                                <view class="itemLeft">
                                    <view class="activityDate"> {{reservationInfo.houseNumber}} </view>
                                    <view class="days">{{reservationInfo.addressDetail}}</view>
                                </view>
                                <view class="itemRight" @tap="toMap(0)">
                                    <view style="text-align: center; width: 100%;">
                                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/toMapIcon.png"
                                            alt="" style="width: 48rpx; height: 48rpx;">
                                    </view>
                                </view>
                            </view>
                            <view class="serviceProductInfo">
                                <view class="infoItem">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/serviceNameIcon.png"
                                        alt="" style="">
                                    <view class="infoItemContent">
                                        <view class="label">服务项目</view>
                                        <view class="text">{{reservationInfo.storeName}}{{reservationInfo.newName}}</view>
                                    </view>
                                </view>
                                <view class="infoItem">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/serviceTimeIcon.png"
                                        alt="" style="">
                                    <view class="infoItemContent">
                                        <view class="label">服务时间</view>
                                        <view class="text"><span>{{reservationInfo.reservationDate}} {{reservationInfo.reservationStartTime}}<span style="" v-if="reservationInfo.reservationStartTime && reservationInfo.reservationEndTime">~</span>{{reservationInfo.reservationEndTime}}</span></view>
                                    </view>
                                </view>
                                <view class="infoItem">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/userNameIcon.png"
                                        alt="" style="">
                                    <view class="infoItemContent">
                                        <view class="label">联系人</view>
                                        <view class="text">{{reservationInfo.contactName}}</view>
                                    </view>
                                </view>
                                <view class="infoItem">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/userPhoneIcon.png"
                                        alt="" style="">
                                    <view class="infoItemContent phoneBox">
                                        <view>
                                            <view class="label">联系电话</view>
                                            <view class="text">{{ reservationInfo.contactPhone }}</view>
                                        </view>
                                        <view class="phoneIcon">
                                            <van-icon name="phone" color="#FF6203" size="24"
                                                @click="makePhoneCall( reservationInfo.contactPhone)" />
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>

                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="bottom" v-if="serviceStatus !=='canceled'">
            <!-- <van-button type="primary" class="button" @click="toRegisterAct">核销码服务</van-button> -->
            <!-- <van-button type="default" class="checkBtn" @tap="toRegisterAct">扫码服务</van-button> -->
            <!-- <button plain type="default" class="button" @tap="showEnterCode">核销码服务</button> -->
            <button plain class="checkBtn" @tap="toSubmitOver" :disabled="isSubmitting"
            :class="{ 'disabled-btn': isSubmitting }">确认完成</button>
        </view>

        <!-- 服务节点 -->
        <serviceNode :show="showNode" @closeNodePopup="closeNodePopup" @startService="startService" :reservationId="reservationId"></serviceNode>

        <!-- 核销码服务 -->
        <!-- <enterVerificationCode :show="showCode" @closeEnterlPopup="closeEnterlPopup" @startService="startService"></enterVerificationCode> -->
    </view>
</template>

<script>
import CryptoJS from 'crypto-js'; // 确保已正确导入 CryptoJS

import { topStyleWhite, topStyleBlack } from '@/utils/topColor'
import {reservationInfoApi,completeServiceApi} from '@/api/staff'
import Toast from '@/wxcomponents/vant/toast/toast'
// import enterVerificationCode from '@/mycomponents/serviceModule/enterVerificationCode.vue'
import serviceNode from '@/mycomponents/serviceModule/serviceNode.vue'


export default {
    components: { 
        // enterVerificationCode,
        serviceNode
    },
    data () {
        return {
            navBarTitle:'服务中',
            menuButtonWidth:'',  //页面右侧按钮的宽度
            shareRight:'',  //图标右侧距离
            latitude: 35.101902,
            longitude: 111.071467,
            title: '服务中', // 页面中服务标题
            serviceStatusTime:'2月19日14:00', // 服务状态时间
            serviceStatus:'开始服务',  //服务状态
            scrolling: false, // 顶部区域吸顶效果
            bgOpacity: '',
            scrollMT: '',
            scrollView: '',
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            listTop: 0,
            detailTop: 0,

            reservationInfo:{
                id:1,
                storeName:'信合名都社区水岸华庭东郡亲子活动游戏活动',
                newName:'东郡·水岸华庭物业',
                startTime:'10月1日0:00',
                endTime:'11月30日23:55',
                term:'仅限东郡小区业主报名',
                nickname:'端木逢春',
                jobTitle:'东郡·水岸华庭物业',
                image:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                introductionContent:"本次活动旨在为老人和孩子们提供一个欢乐的互动平台让大家在游戏中感受亲情的温暖，增强家庭凝聚力。活动将设置多个有趣的亲子游戏环节，让大家在游戏中体验亲子互动的乐趣，无需签到",
                warmReminder:'<p style="padding-bottom:10rpx;"> <a style="color:red;margin-right:5px;">1.</a>社群活动由发起人自行发起，蔚来仅提供活动展示空 间，请大家仔细甄别活动的真实性、有效性、安全性。所有运动、户外等具有相关风险的活动请确认购买保险；</p> <p style="padding-bottom:10rpx;"><a style="color:red;margin-right:5px;">2.</a>此活动报名后不可取消，报名积分不予退还；</p> <p><a style="color:red;width:20rpx;margin-right:5px;">3.</a>若活动发起人取消活动，系统将通知你活动取消并退还积分。</p>',
                joinPeopleNum:0,   //已参与人数
                peopleNum:100,  //可报名人数100人
                location:'东郡·水岸华庭小区西门小广场',
                serviceName:'亲子活动游戏',
                serviceTime:'10月1日0:00-11月30日23:55',
                serviceTerm:'仅限东郡小区业主报名',
                serviceType:'亲子活动',
                houseNumber:'黄金水岸3号楼1单元201',
                addressDetail:'运城市盐湖区河东东街5088号',
                servicePhone:'15600000000',
                contactName:'端木逢春',
                contactPhone:'15600000000',
                userAddress:'运城市盐湖区河东东街5088号',
                serviceContent:'本次活动旨在为老人和孩子们提供一个欢乐的互动平台让大家在游戏中感受亲情的温暖，增强家庭凝聚力。活动将设置多个有趣的亲子游戏环节，让大家在游戏中体验亲子互动的乐趣，无需签到',
                lat: "35.040398",
                lng: "110.976706"
            },

            params:{},
            activitiesId:undefined,  //活动ID
            tabHeight: 118,
            navHeight: uni.getStorageSync('navHeight'), // 顶部导航栏的高度
            fromEarnPoints: false, // 从积分页面跳转过来
            reservationId:undefined, //预约ID
            serviceStatus:'', //服务状态
            fileList: [],
            message: '', // 服务描述内容
            showNode:false, //是否显示服务节点
            popupParams:{},
            isSubmitting: false
        }
    },

    computed: {

    },
    onLoad (data) {
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        console.log('胶囊按钮宽度：', menuButtonInfo.width);
        console.log('胶囊按钮高度：', menuButtonInfo.height);
        this.menuButtonWidth = menuButtonInfo.width
        this.shareRight='padding-right:'+ ( this.menuButtonWidth + 5 ) +'px' + '!important'

        // 取到路由携带的参数
        if (data && data.params) {
            this.params = JSON.parse(decodeURIComponent(data.params) || '{}')
            console.log(JSON.parse(decodeURIComponent(data.params)))
            console.log('params', this.params)
            this.serviceStatusTime = this.params?.serviceStatusTime ||undefined
            this.serviceStatus = this.params?.serviceStatus || 'serving'
            this.fromEarnPoints = this.params?.fromEarnPoints || false
            this.reservationId = this.params.reservationId || undefined
            this.popupParams.reservationId = this.params.reservationId 
            this.title = this.params.serviceStatus === 'canceled' ? '服务已取消' : '服务中'
            this.navBarTitle = this.params.serviceStatus === 'canceled' ? '服务已取消' : '服务中'
        }
    },
    onReady () {
        // const abnormal = this.getAbnormalDetailsMethod()
        // Promise.all([abnormal]).then(() => {
        //     console.log('所有api加载完成')
        //     this.loadingIsShow = false
        // })
    },
    beforeDestroy() {
        clearInterval(this.timer); // 在组件销毁前清除定时器，防止内存泄漏
    },
    onShow(){
        this.getReservationInfo()
    },
    methods: {
        // 顶部导航栏返回
        onClickLeft () {
            uni.navigateBack({
                delta: 1
            })
        },
        handleScroll (e) {
            console.log('顶部滚动距离', e.detail.scrollTop)
            this.old.scrollTop = e.detail.scrollTop

            if (e.detail.scrollTop > 0.2 && !this.scrolling) {
                this.scrolling = true
                // this.scrollMT = 'margin-top: 486px'
            } else if (e.detail.scrollTop <= 0.2 && this.scrolling) {
                this.scrolling = false
                this.scrollMT = 'margin-top:90px;'
            }
            this.bgOpacity = `background: rgba(255, 255, 255, ${e.detail.scrollTop / 200})`
            // console.log(this.bgOpacity)
        },

        // 显示jiedian弹窗
        showNodePopup() {
            this.showNode = true
            console.log('服务节点')
        },
        // 关闭节点弹窗
        closeNodePopup() {
            this.showNode = false
            console.log('服务节点')
        },
        // 拨打电话
        makePhoneCall (phoneNumber) {
            wx.makePhoneCall({
                phoneNumber: phoneNumber
            });
        },
        // 跳转到地图
        toMap (type) {
            wx.openLocation({
                latitude: this.latitude,
                longitude: this.longitude,
                scale: 18
            });
        },
        // 描述内容
        handleInput(e) {
            console.log('输入框输入的内容是：', e.detail.value);
            const value=e.detail.value
            if (value.length > 200) {
                wx.showToast({
                    title: '超出字数限制',
                    icon: 'none'
                });
                return;
            }
            this.message= e.detail.value
        },

        // 上传图片
        async uploadToOSS(file) {
            const OSS_CONFIG = {
                region: 'oss-cn-beijing',
                accessKeyId: 'LTAI5t977yzTgy3KuHsZpNGp',
                accessKeySecret: '3XClQa1PDAqqHyK1avhz5npkhN7Uel',
                bucket: '17lelife-bucket',
                host: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/',
                dir: 'WeChat-App-Picture/service/desc/'
            };

            try {
                // 强化文件路径校验
                const fileRealPath = file.tempFilePath || file.path || file.url;
                if (!fileRealPath) {
                    throw new Error('无法获取有效文件路径，请重新选择文件');
                }

                // 安全获取文件扩展名
                const getExtension = () => {
                    return file.type?.split('/')[1] ||
                        file.name?.split('.').pop() ||
                        fileRealPath.split('.').pop() ||
                        'jpg';
                };

                // 生成唯一文件名
                const fileName = `${Date.now()}_${Math.random()
                    .toString(36)
                    .substr(2, 12)}.${getExtension().toLowerCase()}`;
                const filePath = `${OSS_CONFIG.dir}${fileName}`;

                // 生成安全策略
                const generatePolicy = () => {
                    const policy = {
                        expiration: new Date(Date.now() + 3600000).toISOString(),
                        conditions: [
                            ["content-length-range", 0, 10485760], // 10MB限制
                            ["starts-with", "$key", OSS_CONFIG.dir]
                        ]
                    };
                    return CryptoJS.enc.Base64.stringify(
                        CryptoJS.enc.Utf8.parse(JSON.stringify(policy))
                    );
                };

                // 生成签名
                const policy = generatePolicy();
                const signature = CryptoJS.HmacSHA1(policy, OSS_CONFIG.accessKeySecret)
                    .toString(CryptoJS.enc.Base64);

                // 执行上传
                const uploadResult = await new Promise((resolve, reject) => {
                    uni.uploadFile({
                        url: OSS_CONFIG.host,
                        filePath: fileRealPath,
                        name: 'file',
                        formData: {
                            key: filePath,
                            policy: policy,
                            OSSAccessKeyId: OSS_CONFIG.accessKeyId,
                            signature: signature,
                            success_action_status: '200'
                        },
                        success: (res) => {
                            if (res.statusCode === 200) {
                                resolve(`${OSS_CONFIG.host}${filePath}`);
                            } else {
                                reject(new Error(`上传失败，状态码：${res.statusCode}`));
                            }
                        },
                        fail: (err) => {
                            reject(new Error(`上传请求失败：${err.errMsg}`));
                        }
                    });
                });

                return uploadResult;
            } catch (error) {
                console.error('OSS上传失败详情:', {
                    error,
                    fileObject: file,
                    pathAttempts: {
                        tempFilePath: file.tempFilePath,
                        path: file.path,
                        url: file.url
                    }
                });
                throw new Error(`文件上传失败：${error.message}`);
            }
        },
        async chooseImage() {
            try {
                uni.showLoading({ title: '上传中...' });
                const res = await uni.chooseImage({
                    count: 9 - this.fileList.length,
                    sizeType: ['compressed'],
                    sourceType: ['album', 'camera']
                });

                // 强化去重逻辑
                const uniqueFiles = res.tempFilePaths.filter(path => {
                    return !this.fileList.some(f =>
                        f.url === path || f.url.includes(path.split('/').pop())
                    );
                });

                const uploadPromises = uniqueFiles.map(async (filePath) => {
                    const ossUrl = await this.uploadToOSS({
                        tempFilePath: filePath,
                        path: filePath,
                        type: res.tempFiles[0].type
                    });
                    return {
                        url: ossUrl,
                        status: 'done',
                        isImage: true,
                        localPath: filePath
                    };
                });

                const newFiles = await Promise.all(uploadPromises);
                this.fileList = [...this.fileList, ...newFiles].slice(0, 9);

            } catch (error) {
                uni.showToast({ title: error.message || '上传失败', icon: 'none' });
            } finally {
                uni.hideLoading();
            }
        },

        deleteImage(index) {
            this.fileList.splice(index, 1);
        },
        // 预览图片
        previewImage(currentUrl) {
            uni.previewImage({
                current: currentUrl,
                urls: this.fileList.map(file => file.url),
                fail: (err) => {
                    console.error('预览失败:', err);
                }
            });
        },

        // 确认完成
        toSubmitOver () {
            console.log('确认完成')
            if (this.isSubmitting) return;
            this.isSubmitting = true;
            try {
                if (!this.message.trim()) {
                    uni.showToast({
                        title: '请输入服务描述',
                        icon: 'none'
                    });
                    this.isSubmitting = false;
                    return;
                }

                if (this.fileList.length === 0) {
                    uni.showToast({
                        title: '请上传至少一张图片',
                        icon: 'none'
                    });
                    this.isSubmitting = false;
                    return;
                }
                const attachmentStr = this.fileList.map(f => f.url).join(',');
                console.log('提交服务完成', {
                    description: this.message,
                    images: this.fileList,
                    attachmentStr
                });
                const apiParams = {
                    reservationId: this.popupParams.reservationId,
                    completeRemarks: this.message,
                    completeAttachment: attachmentStr,
                    versionNo: this.popupParams.versionNo
                }
                console.log('提交服务完成', apiParams);
                completeServiceApi(apiParams).then(res => {
                    console.log('提交服务完成', res);
                    if (res.code === 200) {
                        Toast.success('提交成功');
                        setTimeout(() => {
                            const params = {
                                reservationId: this.reservationId,
                                serviceStatus: 'completed'
                            }
                            uni.redirectTo({
                                url:
                                    '/pages/serviceStaff/completedService?params=' +
                                    encodeURIComponent(JSON.stringify(params))
                            })
                        }, 1000);
                    }
                })
            } catch (error) {
                console.error('提交失败:', error);
                Toast('提交失败，请重试');
            } finally {
                this.isSubmitting = false;
            }
        },
        //服务详情
        getReservationInfo(){
            reservationInfoApi({reservationId:this.reservationId}).then(res=>{
                console.log(res)
                if(res.code===200){
                    this.reservationInfo = res.data
                    this.latitude = parseFloat(res.data.lat)
                    this.longitude = parseFloat(res.data.lng)
                    this.popupParams.versionNo = this.reservationInfo.versionNo
                    this.serviceStatusTime = res.data.realStartTime
                }
            })
        },
    }
}

</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
    background-color: transparent !important;
}

.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    overflow-y: auto;
    z-index: -2;
    background-size: 100%;
    background-color: #ffffff;

}

.main {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: transparent;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}

.tabBox {
    position: relative;
    margin-top: 90px;
    // border-bottom: 1px solid #E0E0E0;
}

.content-top {
    .tabs {
        margin-bottom: 12px;
        // 需修改 原来是20px
        padding-left: 10px;
        padding-right: 10px;
        height: 16px;
        line-height: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .white {

        .tab-item {
            font-size: 28rpx;
            // font-weight: bolder;
            color: #666666;
        }

        .tabbar-item {
            flex: auto;
            z-index: 1;
            text-align: center;

            &.active {
                font-style: normal;
                font-weight: bolder;
                font-size: 32rpx;
                line-height: 32rpx;
                color: #111111;
            }
        }
    }
}

.main-container {
    background: #ffffff;
    // height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: -1;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

}
// 背景图部分
.sur_box_bg {
	position: relative;
	// top: 0px;
	width: 100%;
	height: 427rpx;
    // background: linear-gradient(180.00deg, #ff62024d 0%, #ff620200 100%);

	img {
		width: 100%;
		height: 427rpx;
	}
    .sur_box{
        width: 100%;
        height: 427rpx;
        background: linear-gradient(180.00deg, #ff62024d 0%, #ff620200 100%);
    }

    .pageTopTitleContent{
        position: absolute;
        top: 221rpx;
        right: 69rpx;
        .pageTopTitle{
            font-size: 48rpx;
            text-align: right;
            color: #4E78D1;
            line-height: 48rpx;
        }
        .pageTopSubtitle{
            margin-top: 22rpx;
            border-radius: 15px;
            background: #4e78d1;
            font-size: 20rpx;
            line-height: 20rpx;
            text-align: right;
            color: #FFFFFF;
            padding: 5rpx 14rpx;
        }
    }
}
// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}
.card_bg{
    margin-left: 48rpx;
    margin-right: 48rpx;
    margin-top: -256rpx;
    z-index: 10;
    .pageTitle {
        font-weight: 500;
        font-size: 56rpx;
        text-align: left;
        color: #333;
        display: flex;
        align-items: center;
        img{
            width: 24rpx;
            height: 16rpx;
            line-height: 16rpx;
            margin-left: 24rpx
        }
    }
    .serviceStatusTime{
        margin-top: 24rpx;
        font-weight: 400;
        font-size: 24rpx;
        text-align: left;
        color: #666;
        line-height: 24rpx;
    }
}
// 服务描述
.service-desc-card {
    margin-top: 48rpx;
    padding: 40rpx 48rpx;
    width: calc(100% - 96rpx);
    border-radius: 16rpx;
    background: #fff;
    box-shadow: 0 4rpx 16rpx #0000000f;

    .judgeTips {
        padding: 48rpx 0rpx 14rpx 0rpx;
        font-size: 24rpx;
        text-align: left;
        color: #888888;
        border-bottom: 1px solid #f9f9f9;
    }

    .uploadPic {
        margin-top: 36rpx;

    }

    .uploader {
        background-color: #f9f9f9;
        padding: 24px 12px;
        border-radius: 25px;
        border: 1px dashed #f9f9f9;
    }

    .text {
        font-size: 24rpx;
        color: #888888;
        line-height: 24rpx;
    }

    .custom-uploader {
        padding: 15px;
    }

    .upload-btn {
        width: 208rpx;
        height: 208rpx;
        border: 1px dashed #ddd;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        // background-color: #f0f0f0;
    }

    .upload-icon {
        width: 40rpx;
        height: 34rpx;
    }

    .upload-text {
        font-size: 20rpx;
        white-space: pre-line;
        color: #999999;
        margin-top: 8px;
        text-align: center;
    }

    .preview-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .preview-item {
        position: relative;
        width:208rpx;
        height: 208rpx;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 20rpx;
    }

    .preview-image {
        width: 100%;
        height: 100%;
    }

    .delete-icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 24px;
        height: 24px;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        text-align: center;
        line-height: 24px;
        border-radius: 0 0 0 8px;
    }
}

// 服务信息的card
.card{
    margin-top:48rpx ;
    margin-bottom: 144rpx;
    padding: 40rpx 48rpx;
    width: calc(100% - 64rpx);
    border-radius: 16rpx;
    background: #fff;
    box-shadow: 0 4rpx 16rpx #0000000f;

    // 活动地址
    .activityAddress {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .itemRight {
            width: 48rpx;
            height: 48rpx;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .itemLeft {
            .activityDate {
                font-size: 36rpx;
                text-align: left;
                color: #333333;
                font-weight: bold;
            }

            .days {
                margin-top: 16rpx;
                font-size: 24rpx;
                width: 100%;
                color: #666666;
                white-space: nowrap;
                /* 防止文本换行 */
                overflow: hidden;
                /* 超出部分隐藏 */
                text-overflow: ellipsis;
                /* 显示省略号 */
            }
        }

    }

    // // 地图
    // .map {
    //     margin-top: 40rpx;
    //     border-radius: 12rpx;
    //     background: transparent;
    //     border: 1rpx solid #e6e6e6;
    // }

    // 对应服务产品的信息  及用户信息
    .serviceProductInfo{
        .infoItem{
            margin-top: 40rpx;
            display: flex;
            align-items: center;
            width: 100%;
            img{
                width: 112rpx;
                height: 112rpx;
            }
            .infoItemContent{
                margin-left: 32rpx;
               
            }
            .infoItemContent .label{
                font-weight: 400;
                font-size: 36rpx;
                text-align: left;
                color: #333;
                line-height: 36rpx;
            }
            .infoItemContent .text{
                font-weight: 400;
                font-size: 28rpx;
                text-align: left;
                color: #666;
                line-height: 28rpx;
                margin-top: 16rpx;
            }
            .phoneBox{
                display: flex; 
                align-items: center; 
                justify-content: space-between;
                width: calc(100% - (112rpx + 32rpx));
            }
        }
    }
}

.reservationInfo {
    background: #ffffff;
    margin-top: 48rpx;
    padding: 48rpx 32rpx;
}

//商品标题
.goods_detail {
    width: 100%;
}

.text {
    color: #111111;
    font-size: 44rpx;
    text-align: left;
    line-height: 30px;
}

.ellipsis {
    -webkit-line-clamp: initial;
    max-height: none;
}

.icon {
    position: absolute;
    right: 0px;
    bottom: 0px;

    img {
        width: 11px;
        height: 6px;
    }
}

// 标题
.title{
    font-size: 38rpx;
    text-align: left;
    color: #111111;
    line-height: 38rpx;
}



.goodsAction {

    #goodact {
        position: relative;
    }
   

}
textarea{
    min-height: 12px !important;
    line-height: 1.5 !important;
    color:#111111 !important;
}
.goods_act_box {
    position: relative;
    background-color: #ffffff;
    height: 72px;
}

.bottom{
    padding-top: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: calc(env(safe-area-inset-bottom)) !important;
}

.loading {
    text-align: center;
    margin-top: 16px;
    color: #242629;
    font-size: 28rpx;
}
.disabled-btn {
    // background-color: #cccccc !important;
    border-color: #cccccc !important;
}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep #navBar .van-icon {
    color: #242629 !important;
}


::v-deep .van-nav-bar__title {
    font-size: 28rpx;
    color: #333333;
}

::v-deep .van-hairline--bottom:after {
    border: none;
}

::v-deep .van-empty__image {
    width: 150px;
    height: 100px;

}

::v-deep .van-goods-action--safe {
    // padding-bottom: none !important;
}
::v-deep .van-goods-action-button__inner {
    font-weight: normal !important;
}
::v-deep .van-goods-action-icon {
   min-width:70rpx !important;
}
.pl15 {
    padding-left: 15px;
}

.l20 {
    margin-left: 20px;
}
.r12{
    margin-right: 12px;
}
.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}

::v-deep .van-icon-arrow {
    color: #b3b3b3 !important;
}

::v-deep .van-info {
    background-color: #FF6203;
}
::v-deep .van-button--primary {
  width: 100%;
  height: 86rpx;
  border-radius: 50rpx;
  background: #ff6203;
  margin-top: 32rpx;
  font-size: 28rpx;
}
// .button{
//     border-radius: 38px;
//     font-size:28rpx;
//     text-align: center;
//     color: #FF6203 !important;
//     height: 86rpx;
//     line-height: 86rpx;
//     background: #fff;
//     border: 2rpx solid #ff6202 !important;
//     width: 45%;
// }
.checkBtn{
    background-color: #FF6203;
    border: none;
    border-radius: 38px;
    font-size:28rpx;
    text-align: center;
    color: #FFFFFF;
    height: 86rpx;
    line-height: 86rpx;
    width: 100%;
}
</style>
